<template>
  <div class="new-container">
    <el-card>
      <el-row class="title">试题录入</el-row>
      <!-- 表单区域 -->
      <el-form ref="newFormRef" :model="newForm" label-width="102px" :rules="newFormRules">
        <el-form-item label="学科:" prop="subjectID">
          <el-select v-model="newForm.subjectID" placeholder="请选择" @change="subjectNameChange">
            <el-option
              :label="item.subjectName"
              :value="item.id"
              v-for="item in SubjectsList"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录:" prop="catalogID">
          <el-select v-model="newForm.catalogID" placeholder="请选择">
            <el-option
              :label="item.directoryName"
              :value="item.id"
              v-for="item in directory"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="企业:" prop="enterpriseID">
          <el-select v-model="newForm.enterpriseID" placeholder="请选择">
            <el-option
              :label="item.shortName"
              :value="item.id"
              v-for="item in CompanysList"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 城市联动 -->
        <el-form-item class="city_select" label="所属市：">
          <el-select v-model="newForm.province" placeholder="请选择" @change="getCityAreaList">
            <el-option v-for="(item,index) in cities" :key="index" :label="item" :value="item"></el-option>
          </el-select>
          <el-select v-model="newForm.city" placeholder="请选择">
            <el-option
              v-for="(item,index) in cityAreaList"
              :key="index"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="方向:" prop="direction">
          <el-select v-model="newForm.direction" placeholder="请选择">
            <el-option label="外包服务" value="1"></el-option>
            <el-option label="企业服务" value="2"></el-option>
            <el-option label="互联网金融" value="3"></el-option>
            <el-option label="企业咨询" value="4"></el-option>
            <el-option label="互联网" value="5"></el-option>
            <el-option label="电子商务" value="6"></el-option>
            <el-option label="其他" value="7"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="题型:" prop="questionType">
          <el-radio-group v-model="newForm.questionType">
            <el-radio label="1" value="1">单选</el-radio>
            <el-radio label="2" value="2">多选</el-radio>
            <el-radio label="3" value="3">简答</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="难度:" prop="difficulty">
          <el-radio-group v-model="newForm.difficulty">
            <el-radio label="1" value="1">简单</el-radio>
            <el-radio label="2" value="2">一般</el-radio>
            <el-radio label="3" value="3">困难</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="题干:" prop="question">
          <quill-editor ref="myQuillEditor" v-model="newForm.question"/>
        </el-form-item>
        <el-form-item
          label="选项:"
          :inline="true"
          :class="newForm.questionType==3?'hide':''"
          style="width:540px "
        >
          <!-- 单选状态 -->
          <el-radio-group :value="1" v-if="newForm.questionType==1">
            <div class="options" v-for="(item,index) in newForm.options" :key="index">
              <el-radio :label="item.isRight" @click.native="radioClick(item,index)">{{item.code}}</el-radio>
              <el-input v-model="item.title"></el-input>
              <el-upload
                action="https://jsonplaceholder.typicode.com/posts/"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
              >
                <div class="el-upload__text">上传图片</div>
              </el-upload>
            </div>
          </el-radio-group>
          <!-- 多选状态 -->
          <el-checkbox-group :value="[1]" v-else-if="newForm.questionType==2">
            <div class="options" v-for="(item,index) in newForm.options" :key="index">
              <el-checkbox :label="item.isRight" @change.native="checkClick(item,index)">
                <div class="options">
                  <span>{{item.code}}</span>
                  <el-input v-model="item.title" @change.native.stop="1"></el-input>
                  <el-upload
                    action="https://jsonplaceholder.typicode.com/posts/"
                    list-type="picture-card"
                    :on-preview="handlePictureCardPreview"
                    :on-remove="handleRemove"
                  >
                    <div class="el-upload__text">上传图片</div>
                  </el-upload>
                </div>
              </el-checkbox>
            </div>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item :class="newForm.questionType==3?'hide':''">
          <el-button
            type="danger"
            icon="el-icon-plus"
            :disabled="newForm.questionType!=2"
            @click="addcheck"
          >增加选项与答案</el-button>
        </el-form-item>
        <el-form-item label="解析视频">
          <el-input v-model="newForm.videoURL"></el-input>
        </el-form-item>
        <el-form-item label="答案解析:" prop="answer">
          <quill-editor ref="myQuillEditor" v-model="newForm.answer"/>
        </el-form-item>
        <el-form-item label="题目备注:" class="textareabox">
          <el-input type="textarea" :rows="4" v-model="newForm.remarks"></el-input>
        </el-form-item>
        <el-form-item label="试题标签:">
          <el-select v-model="tags" multiple placeholder="请选择">
            <el-option
              :label="item.tagName"
              :value="item.id"
              v-for="item in tagsList"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button v-if="$store.state.question" type="success" @click="submitForm">确认修改</el-button>
          <el-button v-else type="primary" @click="submitForm">确认提交</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>
import { provinces, citys } from '@/assets/citys.js'
import {
  getSubjects,
  getDirectorys,
  getTags,
  getCompanys,
  addRandoms
} from '@/api/questions.js'
import { mapState } from 'vuex'
export default {
  name: 'NewContainer',
  props: {},
  data() {
    return {
      newForm: {
        // 学科
        subjectID: '',
        // 目录
        catalogID: '',
        // 企业
        enterpriseID: '',
        // 方向
        direction: '',
        // 题型
        questionType: '1',
        // 难度
        difficulty: '1',
        // 题干
        question: '',
        // 选项
        options: [
          {
            isRight: 0,
            code: 'A:',
            title: '',
            img: ''
          },
          {
            isRight: 0,
            code: 'B:',
            title: '',
            img: ''
          },
          {
            isRight: 0,
            code: 'C:',
            title: '',
            img: ''
          },
          {
            isRight: 0,
            code: 'D:',
            title: '',
            img: ''
          }
        ],
        //  解析视频
        videoURL: '',
        // 答案分析
        answer: '',
        // 题目备注
        remarks: '',

        // 区
        city: '',
        // 城市
        province: ''
      },
      // 试题标签
      tags: [],
      // 城市联动
      cityAreaList: [],
      cities: [],
      newFormRules: {
        subjectID: [{ required: true, message: '请选择学科', trigger: 'blur' }],
        catalogID: [{ required: true, message: '请选择目录', trigger: 'blur' }],
        enterpriseID: [
          { required: true, message: '请选择企业', trigger: 'blur' }
        ],
        direction: [{ required: true, message: '请选择方向', trigger: 'blur' }],
        questionType: [
          { required: true, message: '请选择题型', trigger: 'blur' }
        ],
        difficulty: [
          { required: true, message: '请选择难度', trigger: 'blur' }
        ],
        question: [{ required: true, message: '请填写题干', trigger: 'blur' }],
        answer: [{ required: true, message: '请填写答案解析', trigger: 'blur' }]
      },
      // 学科数据
      SubjectsList: {},
      // 目录
      directory: {},
      // 标签数据
      tagsList: {},
      // 企业名称
      CompanysList: [],
      isEdit: null
    }
  },
  computed: {
    ...mapState(['question'])
  },
  watch: {},
  methods: {
    // 获取学科数据
    async getSubjectsList() {
      try {
        const { data } = await getSubjects({
          page: 1,
          pagesize: 100000
        })
        this.SubjectsList = data.items
      } catch (err) {
        this.$message.error('获取失败')
      }
    },
    // 获取二级目录和标签
    async subjectNameChange(id) {
      this.getDirect(id)
      this.getTagsList(id)
    },
    // 获取二级目录
    async getDirect(id) {
      try {
        const { data } = await getDirectorys({
          page: 1,
          pagesize: 100000,
          subjectId: id
        })
        const filterDirectorys = data.items.filter(item => {
          return item.subjectID === id
        })
        this.directory = filterDirectorys
      } catch (err) {
        this.$message.error('获取目录失败')
      }
    },
    // 获取标签
    async getTagsList(id) {
      try {
        const { data } = await getTags({
          page: 1,
          pagesize: 100000,
          subjectId: id
        })
        this.tagsList = data.items
        console.log(this.tagsList)
      } catch (err) {
        this.$message.error('获取标签失败')
      }
    },
    // // 城市联动 市发生改变
    getCityList() {
      const data = provinces()
      this.cities = data
    },
    // // 城市联动 区发生改变
    getCityAreaList() {
      const data = citys(this.newForm.province)
      this.cityAreaList = data
      this.newForm.city = data[0]
    },
    // 获取企业
    async getCompanysList() {
      try {
        const { data } = await getCompanys({
          page: 1,
          pagesize: 1000
        })
        this.CompanysList = data.items
      } catch (err) {
        this.$message.error('获取企业数据失败')
      }
    },
    // 上传图片
    handleRemove(file, fileList) {},
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    // 提交表单
    submitForm() {
      console.log(this.newForm)
      this.$refs.newFormRef.validate(async valid => {
        if (!valid) return
        await addRandoms(this.newForm)
        this.$message.success('添加成功')
        this.$router.push('/questions/list')
      })
      this.$refs.newFormRef.resetFields()
    },
    // 单选题点击事件
    radioClick(item, i) {
      this.newForm.options.forEach((item, index) => {
        item.isRight = i === index ? 1 : 0
      })
    },
    // 多选题点击事件
    checkClick(val, i) {
      val.isRight = val.isRight ? 0 : 1
      this.$forceUpdate()
      console.log(val.isRight)
    },
    // 添加多选选项
    addcheck() {
      var data = { isRight: 0, code: 'D:', title: '', img: '' }
      this.newForm.options.push(data)
    }
  },
  created() {
    // 企名称
    this.getSubjectsList()
    this.getCompanysList()
    this.getCityList()
    // 判断是添加还是编辑
    this.isEdit = !!this.$store.state.question
    if (this.isEdit) {
      this.newForm = this.$store.state.question
    }
  },
  destroyed() {
    this.$store.commit('questionDetail', null)
  },
  mounted() {}
}
</script>

<style lang='less' scoped>
.new-container {
  .title {
    border-bottom: 1px solid #ccc;
    padding-left: 12px;
    padding-bottom: 20px;
  }
  .el-form {
    margin: 20px 0;
    .el-form-item {
      padding-left: 40px;
      /deep/.el-input__inner {
        width: 400px;
      }
      /deep/.el-form-item__label {
        padding-right: 30px;
      }
    }
    .textareabox {
      /deep/.el-form-item__content {
        width: 400px;
      }
    }
    .options {
      display: flex;
      justify-content: center;
      align-items: center;
      line-height: 45px;
      /deep/.el-upload--picture-card {
        position: relative;
        width: 98px;
        height: 45px;
        .el-upload__text {
          font-size: 12px;
          color: #8c939d;
          line-height: 45px;
        }
      }
      .el-input {
        width: 300px;
        height: 50px;
        /deep/ .el-input__inner {
          width: 290px;
          height: 45px;
        }
      }
      span {
        padding-right: 10px;
      }
    }
  }
  .city_select {
    width: 510px;
    /deep/.el-input__inner,
    /deep/.el-select {
      margin-right: 1px;
      width: 200px !important;
    }
    /deep/.el-select > .el-input {
      display: block;
      width: 200px;
    }
  }
  .hide {
    display: none;
  }
}
</style>
